<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Sam
 * @Date: 2022-04-07 20:18:30
 * @LastEditors: Sam
 * @LastEditTime: 2022-10-13 11:24:27
-->
<template>
    <div class="app-container">
        <el-card>
            <div slot="header" class="clearfix">
                <span>订单管理</span>
            </div>
             <div class="filter-container">
                <el-input v-model="listQuery.order_sn" placeholder="请输入订单编号" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item" @keyup.enter.native="handleFilter" />
                   <el-date-picker v-model="listQuery.date_search" type="daterange" value-format="yyyy-MM-dd"  style="width: 250px;margin-right: 10px;margin-bottom:10px" start-placeholder="开始日期"
                    end-placeholder="结束日期"  range-separator="/" placeholder="请选择示例日期"     @keyup.enter.native="handleFilter" />
                     <el-input v-model="listQuery.order_user" placeholder="请输入用户信息" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item" @keyup.enter.native="handleFilter" />
                    <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                    {{ '搜索' }}
                    </el-button>
                    <el-button v-waves :disabled="!checkPermission(['order.export'])"  type="success" icon="el-icon-upload2" @click="handleExport">
                    {{ '导出' }}
                     </el-button>
                    <el-row>
                        <el-button size="mini" :type="listQuery.status == 'all' ? 'primary' : ''" @click="search_status('all')" >全部 <el-tag size="mini" type="danger">{{count_data.all}}</el-tag></el-button>
                        <el-button size="mini" :type="listQuery.status == '0' ? 'primary' : ''" @click="search_status('0')">未支付 <el-tag size="mini" type="danger">{{count_data.count0}}</el-tag></el-button>
                        <el-button size="mini" :type="listQuery.status == '1' ? 'primary' : ''" @click="search_status('1')">待发货 <el-tag size="mini" type="danger">{{count_data.count1}}</el-tag></el-button>
                        <el-button size="mini" :type="listQuery.status == '2' ? 'primary' : ''" @click="search_status('2')">待收货 <el-tag size="mini" type="danger">{{count_data.count2}}</el-tag></el-button>
                        <el-button size="mini" :type="listQuery.status == '3' ? 'primary' : ''"  @click="search_status('3')">已收货 <el-tag size="mini" type="danger">{{count_data.count3}}</el-tag></el-button>
                        <el-button size="mini" :type="listQuery.status == '4' ? 'primary' : ''" @click="search_status('4')">申请退款 <el-tag size="mini" type="danger">{{count_data.count4}}</el-tag></el-button>
                        <el-button size="mini" :type="listQuery.status == '5' ? 'primary' : ''" @click="search_status('5')">审核通过 <el-tag size="mini" type="danger">{{count_data.count5}}</el-tag></el-button>
                        <el-button size="mini" :type="listQuery.status == '6' ? 'primary' : ''" @click="search_status('6')">审核拒绝 <el-tag size="mini" type="danger">{{count_data.count6}}</el-tag></el-button>
                        <el-button size="mini" :type="listQuery.status == '7' ? 'primary' : ''" @click="search_status('7')">已评价 <el-tag size="mini" type="danger">{{count_data.count7}}</el-tag></el-button>
                    </el-row>
              
                     
            </div>
             <el-table
                v-loading="listLoading"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%"
                size="mini"
                >  
                 <el-table-column align="center" type="selection" width="55"> 
                </el-table-column> 
                <el-table-column  align="center" label="编号" width="60">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="订单号">
                    <template slot-scope="scope">
                        <span>{{ scope.row.order_id }}</span>
                    </template>
                </el-table-column>
                 <el-table-column  align="center" label="用户">
                    <template slot-scope="scope">
                        <span>{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="商品信息" width="420">
                    <template slot-scope="scope" >
                        <div   v-for="(item,index) in scope.row.cart_detail" :key="index">
                            <div style="display: flex" v-if="item.cart_info.productInfo.attrInfo!=undefined">
                                <span style="margin-right: 10px">
                                <img style="width: 30px;height: 30px;margin:0;cursor: pointer;"
                                     :src="item.cart_info.productInfo.attrInfo.image">
                                </span>
                                <span>{{item.cart_info.productInfo.store_name}}&nbsp;{{item.cart_info.productInfo.attrInfo.suk}}</span>
                                <span> | ￥{{item.cart_info.truePrice}}×{{item.cart_info.cart_num}}</span>
                            </div>
                            <div style="display: flex" v-else>
                                <span style="margin-right: 10px"><img style="width: 30px;height: 30px;margin:0;cursor: pointer;"
                                        :src="item.cart_info.productInfo.image"></span>
                                <span>{{item.cart_info.productInfo.store_name}}</span><span> | ￥{{item.cart_info.truePrice}}×{{item.cart_info.cart_num}}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="订单金额">
                    <template slot-scope="scope">
                        <span>{{ scope.row.pay_price }}</span>
                    </template>
                </el-table-column>
                 <el-table-column  align="center" label="订单状态">
                    <template slot-scope="scope">
                        {{ scope.row.status_text }}
                    </template>
                </el-table-column>
                 <el-table-column  align="center" label="下单时间">
                    <template slot-scope="scope">
                        {{ scope.row.add_time }}
                    </template>
                </el-table-column>
  


                <el-table-column align="center" width="250" :label="'操作'">
                <template slot-scope="scope">
                    
                    <el-button v-waves v-permission="['goods.edit']"  v-if="scope.row.status==0 && scope.row.paid==0" type="text"  size='mini'  @click="handleEdit(scope.$index, scope.row)">
                        {{ "编辑" }}
                    </el-button>
                    <el-button v-waves v-permission="['goods.refund_y']"  v-if="scope.row.paid ==1 && scope.row.status ==4" type="text"  size='mini'  @click="handleRefundYes(scope.row.id)">
                        {{ "通过退款" }}
                    </el-button>
                     <el-button v-waves v-permission="['goods.refund_n']"  v-if="scope.row.paid ==1 && scope.row.status ==4" type="text"  size='mini'  @click="handleRefundNo(scope.row.id)">
                        {{ "拒绝退款" }}
                    </el-button>
                    <el-button v-waves v-permission="['goods.deliver']"  v-if="scope.row.status== 1 && scope.row.paid==1" type="text"  size='mini'  @click="handleDeliver(scope.$index, scope.row)">
                        {{ "订单发货" }}
                    </el-button>
           
                    <el-button v-waves v-permission="['goods.detail']"  type="text"  size='mini'  @click="handleDetail(scope.$index, scope.row)">
                        {{ "详情" }}
                    </el-button>
                    <el-button v-waves v-permission="['goods.log']"  type="text"  size='mini' @click="handleLog(scope.$index, scope.row)">
                        {{ "操作记录" }}
                    </el-button>
                </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
        </el-card>
        <el-dialog :title="'订单操作记录'" :visible.sync="log.dialogVisible"   v-loading="log.listLoading" v-if="log.dialogVisible">
            <el-table :data="log.list" style="width: 100%">
                <el-table-column label="操作记录" prop="change_message"></el-table-column>
                 <el-table-column label="操作时间" prop="change_time"></el-table-column>
                 <el-table-column label="操作IP" prop="ip"></el-table-column>
            </el-table>
            <pagination v-show="log.total>0" :total="log.total" :page.sync="log.listQuery.page" :limit.sync="log.listQuery.limit" @pagination="get_order_log" />
        </el-dialog>
        <el-dialog :title="'订单详情'" :visible.sync="detail.dialogVisible" v-if="detail.dialogVisible">
              <el-descriptions title="收货信息" border>
                <el-descriptions-item label="用户昵称">{{detail.data.nickname}}</el-descriptions-item>
                <el-descriptions-item label="收货人">{{detail.data.real_name}}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{detail.data.user_phone}}</el-descriptions-item>
                <el-descriptions-item label="收货地址">{{detail.data.user_address}}</el-descriptions-item>
            </el-descriptions>
              <el-descriptions title="订单信息"  border style="margin-top:20px" :column="1">
                <el-descriptions-item label="商品信息">
                    <div  v-for="(item,index) in detail.data.cart_detail" :key="index">
                            <div style="display: flex" v-if="item.cart_info.productInfo.attrInfo!=undefined">
                                <span style="margin-right: 10px">
                                <img style="width: 30px;height: 30px;margin:0;cursor: pointer;"
                                     :src="item.cart_info.productInfo.attrInfo.image">
                                </span>
                                <span>{{item.cart_info.productInfo.store_name}}&nbsp;{{item.cart_info.productInfo.attrInfo.suk}}</span>
                                <span> | ￥{{item.cart_info.truePrice}}×{{item.cart_info.cart_num}}</span>
                            </div>
                            <div style="display: flex" v-else>
                                <span style="margin-right: 10px"><img style="width: 30px;height: 30px;margin:0;cursor: pointer;"
                                        :src="item.cart_info.productInfo.image"></span>
                                <span>{{item.cart_info.productInfo.store_name}}</span><span> | ￥{{item.cart_info.truePrice}}×{{item.cart_info.cart_num}}</span>
                            </div>
                        </div>
                </el-descriptions-item>
                <el-descriptions-item label="订单编号">{{detail.data.order_id}}</el-descriptions-item>
                <el-descriptions-item label="订单状态" style="align-items: center;">
                    <el-tag >{{detail.data.status_text}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="优惠券" v-if="detail.data.coupon_id >0">[{{detail.data.coupon.coupon_title}}] 优惠金额 ￥{{detail.data.coupon_price}}</el-descriptions-item>
                 <el-descriptions-item label="优惠券" v-else>无</el-descriptions-item>
                <el-descriptions-item label="退款备注" v-if="detail.data.paid == 1 && detail.data.refund_reason_wap_explain">{{detail.data.refund_reason_wap_explain}}</el-descriptions-item>
                <el-descriptions-item label="拒绝原因" v-if="detail.data.paid == 1 && detail.data.status == 6">{{detail.data.refund_reason}}</el-descriptions-item>
                <el-descriptions-item label="退货单号" v-if="detail.data.paid == 1 && detail.data.refund_express">{{detail.data.refund_express}}</el-descriptions-item>
                <el-descriptions-item label="退款备注图片" v-if="detail.data.paid == 1 && detail.data.status == 4 && detail.data.refund_reason_wap_img">
                     <el-image 
                        v-for="(item,index) in detail.data.refund_reason_wap_img"
                        :key="index"
                        style="width: 100px; height: 100px"
                        :src="item" 
                        :preview-src-list="detail.data.refund_reason_wap_img">
                    </el-image>
                </el-descriptions-item>
                <el-descriptions-item label="商品总数">{{detail.data.total_num}}</el-descriptions-item>
                <el-descriptions-item label="商品总价">{{detail.data.total_price}}</el-descriptions-item>
                <el-descriptions-item label="总优惠金额"> ￥{{detail.data.deduction_price}}
                </el-descriptions-item>
                <el-descriptions-item label="实际支付"> ￥{{detail.data.pay_price}}
                </el-descriptions-item>
                 <el-descriptions-item label="退款金额" v-if="detail.data.refund_price > 0">{{detail.data.refund_price}}</el-descriptions-item>
                 <el-descriptions-item label="创建时间">{{detail.data.add_time}}</el-descriptions-item>
                  <el-descriptions-item label="支付时间" v-if="detail.data.pay_time > 0">{{detail.data.pay_time}}</el-descriptions-item>
                  <el-descriptions-item label="用户备注" v-if="detail.data.mark">{{detail.data.mark}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="物流信息" border style="margin-top:20px">
                <el-descriptions-item label="快递公司">{{detail.data.delivery_name}}</el-descriptions-item>
                <el-descriptions-item label="快递单号">{{detail.data.delivery_id}}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
        <el-dialog :title="'订单编辑'"  :visible.sync="edit.dialogVisible"  @close="getList" :close-on-click-modal=false>
            <el-form :model="edit.form"  :rules="edit.rules" ref="editForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="订单编号" prop="order_id" >
                        <el-input v-model="edit.form.order_id" disabled ></el-input>
                </el-form-item>
                <el-form-item label="订单总价" prop="total_price"  >
                    <el-input v-model="edit.form.total_price" ></el-input>
                </el-form-item>
                <el-form-item label="支付价格" prop="pay_price" >
                        <el-input v-model="edit.form.pay_price" ></el-input>
                </el-form-item>
                
                <el-form-item label="收货地址" prop="user_address" >
                        <el-input v-model="edit.form.user_address" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="edit.dialogVisible = false">取 消</el-button>
                <el-button type="primary" :disabled="$store.state.settings.ajaxButton"  @click="submitEditForm('form')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="'订单发货'"  :visible.sync="deliver.dialogVisible"  width="30%" @close="getList" :close-on-click-modal=false>
            <el-form :model="deliver.form" ref="deliverForm" :rule = "deliver.rule" label-width="100px">
                <el-form-item label="快递公司" prop="delivery_name"  >
                    <el-input v-model="deliver.form.delivery_name" ></el-input>
                </el-form-item>
                <el-form-item label="快递单号" prop="delivery_id" >
                        <el-input v-model="deliver.form.delivery_id" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="deliver.dialogVisible = false">取 消</el-button>
                <el-button type="primary" :disabled="$store.state.settings.ajaxButton"  @click="submitDeliverForm('deliverForm')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="'审核通过'"  :visible.sync="refund_yes.dialogVisible"  width="30%" @close="getList" :close-on-click-modal=false>
            <el-form :model="refund_yes.form"  label-width="100px">
                <el-form-item label="退款金额" prop="refund_price"  >
                    <el-input v-model="refund_yes.form.refund_price" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="refund_yes.dialogVisible = false">取 消</el-button>
                <el-button type="primary" :disabled="$store.state.settings.ajaxButton"  @click="submitRefundYesForm()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="'审核拒绝'"  :visible.sync="refund_no.dialogVisible"  width="30%" @close="getList" :close-on-click-modal=false>
            <el-form :model="refund_yes.form"  label-width="100px">
                <el-form-item label="拒绝理由" prop="refund_reason"  >
                    <el-input type="textarea" :rows="5" v-model="refund_no.form.refund_reason" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="refund_no.dialogVisible = false">取 消</el-button>
                <el-button type="primary" :disabled="$store.state.settings.ajaxButton"  @click="submitRefundNoForm()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style scoped>
    .import {
        display: inline-block;
        margin-left: 5px;
    }
</style>
<script>
    import {export_excell} from '@/api/export_excell' // 导出
    import waves from '@/directive/waves' // waves directive
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import checkPermission from '@/utils/permission' // 权限判断函数
    import { list, detail, order_log,edit,deliver,refund_yes,refund_no } from '@/api/order' // api接口
    import { parseTime } from '@/utils' // 时间格式化函数
    import { getToken } from '@/utils/auth' // 获取token
    import Pagination from '@/components/Pagination' // 分页组件
    export default{
        name: 'order_index',
        components: { Pagination }, // 引入组件
        filters: {
            parseTime // 时间过滤器
        },
        directives: { waves, permission }, // 引入指令
          data() {
            return {
            count_data: {
                'all': 0,
                'count0' :0,
                'count1' :0,
                'count2' :0,
                'count3' :0,
                'count4' :0,
                'count5' :0,
                'count6' :0,
                'count7' :0
            }, // 订单统计数据
             headerObj: {
                'Authorization': 'Bearer ' + getToken()
            },
            rule_list: [],
            category : [],
            list: null, // 列表数据
            total: 0, // 总条数
            select_ids : [], // 选中的id集合
            listLoading: true, //加载loadig
            listQuery: { //列表查询参数
                page: 1,
                limit: 10,
                status : 'all'
            },
            create: { // 新增
                dialogVisible: false
            },
            detail: { // 详情
                dialogVisible: false,
                data: {},
                
            },
            log:{
                dialogVisible: false,
                listLoading: true,
                listQuery: { //列表查询参数
                    page: 1,
                    limit: 10
                },
                list: [],
                total: 0,
            },
            edit: { // 编辑
                dialogVisible: false,
                form: {},
                id: '',
                },
            refund_yes: { // 退款
                    dialogVisible: false,
                    form: {},
                } ,
            refund_no: { // 退款
                    dialogVisible: false,
                    form: {},
                } ,
            deliver: { // 发货
                dialogVisible: false,
                form: {},
                rules : {
                    deliver_id : [
                        { required: true, message: '请输入快递单号', trigger: 'blur' }
                    ],
                    deliver_name : [
                        { required: true, message: '请输入快递公司', trigger: 'blur' }
                    ]
                }
                }
            }
        },
          created() {
            this.getList()
        },
        methods: {
            search_status(status){
                this.listQuery.status = status
                this.handleFilter()
            },
            submitRefundYesForm() {
                refund_yes(this.refund_yes.form).then(res => {
                    this.$message.success('操作成功')
                    this.refund_yes.dialogVisible = false
                })
                
            },
            submitRefundNoForm() {
                refund_no(this.refund_no.form).then(res => {
                    this.$message.success('操作成功')
                    this.refund_no.dialogVisible = false
                })
                
            },
            handleRefundYes(id) {
                detail(id).then(res => {
                    this.refund_yes.form.id = res.data.id
                    this.refund_yes.dialogVisible = true
                })
            },
              handleRefundNo(id) {
                detail(id).then(res => {
                    this.refund_no.form.id = res.data.id
                    this.refund_no.dialogVisible = true
                })
            },
            submitEditForm(formName) {
                var that =  this;
                edit(this.edit.form).then(res => {
                     this.$store.commit('settings/SET_AJAX_BUTTON', true);
                    this.$message({
                        message: '编辑成功',
                        type: 'success',
                        duration: 1500,
                        onClose() {
                            that.edit.dialogVisible = false
                            that.edit.form = {};
                        }
                    });
                }).catch(err => {});
            },
            submitDeliverForm(formName) {
                var that =  this;
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        deliver(this.deliver.form).then(res => {
                            this.$store.commit('settings/SET_AJAX_BUTTON', true);
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose() {
                                    that.deliver.dialogVisible = false
                                    that.deliver.form = {};
                                }
                            });
                        }).catch(err => {});
                    }else{
                        return false
                    }
                }
                )
            },
            handleExport(){
                export_excell(process.env.VUE_APP_BASE_API + 'admin/order_export',this.listQuery);
            },
            checkPermission, // 权限判断函数
            handleFilter() { // 查询
                this.listQuery.page = 1
                this.getList()
            },
            
            handleCreate() { // 新增对话框显示
              this.create.dialogVisible = true
            },
            handleDeliver(index,row){
                this.deliver.dialogVisible = true;
                this.deliver.form.id = row.id;
            },
            handleLog(index, row) {
               this.log.dialogVisible = true
               this.get_order_log(row.id)
            }, // 日志对话框显示
            handleEdit(index, row) { // 编辑对话框显示
              this.edit.dialogVisible = true
              detail(row.id).then(res => {
                    this.edit.form = res.data
                })
            },
            handleDetail(index, row) { // 编辑对话框显示
              this.detail.dialogVisible = true
              this.edit.id = row.id
              this.get_detail(row.id);
            },
            get_order_log(id){
                order_log(id).then(res => {
                    this.log.list = res.data.data
                    this.log.total = res.data.total
                    this.log.listLoading = false
                })
            },
            get_detail(id){
                detail(id).then(res => {
                    this.detail.data = res.data
                })
            },
            getList() { // 获取列表
                this.listLoading = true
                list(this.listQuery).then(response => {
                        this.list = response.data.data
                        this.total = response.data.total
                        this.category = response.data.category
                        this.count_data = response.data.count_data
                        this.rule_list = response.data.rule_list
                        this.listLoading = false
                    })
                },
            }
    }
</script>

